<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!--快捷导航-->
<div class="shortcut">
    <div class="wrapper">
        <ul class="fr">
            <li>
                <a href="#">请先登录</a>
            </li>
            <li>
                <a href="#">请先登录</a>
            </li>
            <li>
                <a href="#">请先登录</a>
            </li>
            <li>
                <a href="#">请先登录</a>
            </li>
            <li>
                <a href="#">请先登录</a>
            </li>
            <li>
                <a href="#">请先登录</a>
            </li>
            <li>
                <a href="#"><span></span>请先登录</a>
            </li>
        </ul>
    </div>
</div>
<!--header-->
<div class="header wrapper">
    <!--    logo-->
    <div class="logo">
        <h1>
            <a href="#">
                小兔鲜儿
            </a>
        </h1>
    </div>
    <!--    nav-->
    <div class="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
        </ul>
    </div>
    <!--    search-->
    <div class="search">
        <!--        放大镜-精灵图-->
        <span></span>
        <label>
            <input type="text" placeholder="搜一搜">
        </label>
    </div>
    <!--    car-->
    <div class="car">
        <span>2</span>
    </div>
</div>
<!--banner-->
<div class="banner">
    <div class="wrapper">
        <ul>
            <li><a href="#"><img src="uploads/banner_1.png" alt=""></a></li>
        </ul>
        <!--        侧边导航-->
        <div class="aside">
            <ul>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
                <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
            </ul>
        </div>
        <!--        箭头-->
        <!--        prev:上一个-->
        <a href="#" class="prev"></a>
        <!--        next:下一个-->
        <a href="#" class="next"></a>
        <!--当前-圆点-->
        <ol>
            <li></li>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>

    </div>
</div>
<!--好物推荐-->
<div class="goods wrapper">
    <!--    标题头部-->
    <div class="hd">
        <h2>新鲜好物
            <span>新鲜出炉 品质靠谱</span></h2>
        <a href="#">查看全部</a>
    </div>
    <!--    商品-->
    <div class="bd clearfix">
        <ul>
            <li>
                <a href="#">
                    <img src="uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>
                        ￥
                        <span>899</span>
                    </div>
                    <b>新品</b>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>
                        ￥
                        <span>899</span>
                    </div>
                    <b>新品</b>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>
                        ￥
                        <span>899</span>
                    </div>
                    <b>新品</b>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>
                        ￥
                        <span>899</span>
                    </div>
                    <b>新品</b>
                </a>
            </li>
        </ul>
    </div>

</div>
<div class="fresh wrapper">
    <!--    标题头-->
    <div class="hd">
        <h2>生鲜</h2>
        <!--        离右侧更近，先写右侧-->
        <!--        伪元素+精灵图定位实现箭头符号-->
        <a href="#" class="more">查看更多</a>
        <ul>
            <li><a href="#">水果</a></li>
            <li><a href="#">水果</a></li>
            <li><a href="#">水果</a></li>
            <li><a href="#">水果</a></li>
            <li><a href="#">水果</a></li>
            <li><a href="#">水果</a></li>
            <li><a href="#">水果</a></li>
        </ul>
    </div>
    <!--    bd-->
    <div class="bd">
        <div class="left">
            <a href="#">
                <img src="uploads/fresh_goods_cover.png" alt="">
            </a>
        </div>
        <div class="right"></div>
    </div>
</div>
<!--版权footer-->
<div class="footer ">
    <div class="wrapper">
        <div class="top">
            <ul>
                <li><span>价格亲民</span></li>
                <li><span>价格亲民</span></li>
                <li><span>价格亲民</span></li>
            </ul>
        </div>
        <div class="bottom">
            <p>
                <a href="#">关于我们</a>
                |
                <a href="#">关于我们</a>
                |
                <a href="#">关于我们</a>
                |
                <a href="#">关于我们</a>
                |
                <a href="#">关于我们</a>
                |
                <a href="#">关于我们</a>
                |
                <a href="#">关于我们</a>

            </p>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>
</div>
</body>
</html>